<template>
  <div>
    <div class="banner" @click="handleChangeisShow">
      <img class="banner-img" :src="detailInfo.bannerImg" >
      <div class="banner-desc">{{detailInfo.sightName}}</div>
      <div class="banner-icon" v-if="hasImgs" v-once> {{detailInfo.gallaryImgs.length}}</div>
    </div>
    <!--打开该组件时，便会有动画效果-->
    <FadeAnimation>
       <common-gallary v-show="isShow" :gallaryImgs = "detailInfo.gallaryImgs" @Close="handleChangeisShow"></common-gallary>
    </FadeAnimation>
  </div>

</template>

<script>
    import CommonGallary from 'common/Gallary/gallary'
    import FadeAnimation from 'common/fadeAnimation/fade'
    export default {
        props:{
          detailInfo: Object
        },
        computed:{
          hasImgs(){
            if(this.detailInfo.gallaryImgs){
              return true
            }else{
              return false
            }
          }
        },
        name: "banner",
        data(){
          return{
            isShow:false,
          }
        },
        components:{
          CommonGallary,
          FadeAnimation
        },
        methods:{
          handleChangeisShow(){
            this.isShow = !this.isShow
          }
        }
    }
</script>

<style lang="stylus" scoped>
  /* 1.在css里运用import前面要加@，js里不用，
    2.别名在css里使用要加~前缀，在js里不用 */
  @import "~assets/styles/mixins"

  .banner
    overflow hidden
    height 0
    padding-bottom 55%
    position relative
  .banner-img
    width 100%
    position absolute
    z-index:0
    top:0
    left 0
  .banner-desc
    color: #fff
    position absolute
    z-index 1
    bottom 0rem
    left 0rem
    padding-left: 0.2rem;
    padding-bottom: 0.2rem;
    font-size 0.36rem
    text-shadow: 0 1px 2px rgba(0,0,0,0.70)
    /* background linear-gradient(top,rgba(0,0,0,0), rgba(0,0,0,0.8)); */
    line-height: .4rem;
    height 0.6rem
    width 100%
    box-sizing border-box
    padding-right 0.2rem
    ellipsis()
  .banner-icon
    position absolute
    z-index 2
    bottom:0.8rem
    color:#fff
    left:0.2rem
    background:rgba(0,0,0,0.5)
    width:1.2rem
    height .4rem
    line-height 0.4rem
    text-align center
    border-radius 1rem
    ellipsis()
  .banner-icon:before
    content:'\e67b'
    font-family "iconfont"

</style>
